<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<div ng-controller="TimeConductorController as tcController"
    class="holder grows flex-elem l-flex-row l-time-conductor {{tcController.isFixed ? 'fixed-mode' : 'realtime-mode'}} {{timeSystemModel.selected.metadata.key}}-time-system"
        ng-class="{'status-panning': tcController.panning}">
    <div class="flex-elem holder time-conductor-icon">
        <div class="hand-little"></div>
        <div class="hand-big"></div>
    </div>

    <div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
        <!-- Holds inputs and ticks -->
        <div class="l-time-conductor-inputs-and-ticks l-row-elem flex-elem no-margin">
            <form class="l-time-conductor-inputs-holder"
                  ng-submit="tcController.isFixed ? tcController.setBoundsFromView(boundsModel) : tcController.setOffsetsFromView(boundsModel)">
                <span class="l-time-range-w start-w">
                    <span class="l-time-conductor-inputs">
                        <span class="l-time-range-input-w start-date">
                            <span class="title"></span>
                            <mct-control key="'datetime-field'"
                                         structure="{
                                             format: timeSystemModel.format,
                                             validate: tcController.validation.validateStart
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setBoundsFromView(boundsModel)"
                                         field="'start'"
                                         class="time-range-input">
                            </mct-control>
                        </span>
                            <span class="l-time-range-input-w time-delta start-delta"
                              ng-class="{'hide':tcController.isFixed}">
                                -
                            <mct-control key="'datetime-field'"
                                         structure="{
                                            format: timeSystemModel.durationFormat,
                                            validate: tcController.validation.validateStartOffset
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setOffsetsFromView(boundsModel)"
                                         field="'startOffset'"
                                         class="s-input-inline hrs-min-input">
                            </mct-control>
                        </span>
                    </span>
                </span>
                <span class="l-time-range-w end-w">
                    <span class="l-time-conductor-inputs">
                        <span class="l-time-range-input-w end-date"
                              ng-controller="ToggleController as t2">
                            <span class="title"></span>
                            <mct-control key="'datetime-field'"
                                         structure="{
                                             format: timeSystemModel.format,
                                             validate: tcController.validation.validateEnd
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setBoundsFromView(boundsModel)"
                                         ng-disabled="!tcController.isFixed"
                                         field="'end'"
                                         class="time-range-input">
                            </mct-control>
                        </span>
                        <span class="l-time-range-input-w time-delta end-delta"
                              ng-class="{'hide': tcController.isFixed}">
                                +
                            <mct-control key="'datetime-field'"
                                         structure="{
                                            format: timeSystemModel.durationFormat,
                                            validate: tcController.validation.validateEndOffset
                                         }"
                                         ng-model="boundsModel"
                                         ng-blur="tcController.setOffsetsFromView(boundsModel)"
                                         field="'endOffset'"
                                         class="s-input-inline hrs-min-input">
                            </mct-control>
                        </span>
                    </span>
                </span>

                <input type="submit" class="invisible">
            </form>
            <conductor-axis class="mobile-hide" view-service="tcController.conductorViewService"></conductor-axis>
        </div>

        <!-- Holds time system and session selectors, and zoom control -->
        <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
            <mct-include
                key="'mode-selector'"
                ng-model="tcController.menu"
                class="holder flex-elem menus-up mode-selector">
            </mct-include>
            <mct-control
                    key="'menu-button'"
                    class="holder flex-elem menus-up time-system"
                    structure="{
                        text: timeSystemModel.selected.name,
                        click: tcController.setTimeSystemFromView,
                        options: tcController.timeSystemsForClocks[tcController.menu.selected.key]
                    }">
            </mct-control>
            <!-- Zoom control -->
            <div ng-if="tcController.zoom"
                 class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
                {{currentZoom}}
                <span class="time-conductor-zoom-current-range flex-elem flex-fixed holder">{{timeUnits}}</span>
                <input class="time-conductor-zoom flex-elem" type="range"
                       ng-model="tcController.currentZoom"
                       ng-mouseUp="tcController.onZoomStop(tcController.currentZoom)"
                       ng-change="tcController.onZoom(tcController.currentZoom)"
                       min="0.01"
                       step="0.01"
                       max="0.99" />
            </div>
        </div>

    </div>
</div>
